<template>
	<view>
		<view class="page">
			<comp-common v-bind="{data:data}"></comp-common>
			<comp-header v-bind="{data:data}"></comp-header>
			<view class="body after-navber">
				<view class="bg" :style="data._navbar&&data._navbar.navs&&data._navbar.navs.length>0?('padding-bottom:'+upx_115):''">
					<view class="pond-head">
						<image :src="data.__wxapp_img.pond.pond.pond_head.url"></image>
						<navigator hoverClass="navigator-hover" url="/pond/rule/rule">
							<view class="pond-gze">规则</view>
						</navigator>
						<view @click="showShareModal" class="pond-gze" style="top:104upx">分享</view>
					</view>
					<view class="pond-cj">
						<view class="pond-text">您还有<text class="pond-num">{{data.oppty}}</text>次抽奖机会</view>
					</view>
					<view class="container-out">
						<view class="circle" :style="{top:citem.new_topCircle,left:citem.new_leftCircle,backgroundColor:index%2==0?data.colorCircleFirst:data.colorCircleSecond}"
						 v-for="(citem,index) in new_circleList" :key="index"></view>
						<view class="container-in">
							<view class="content-out" :style="{top:aitem.new_topAward,left:aitem.new_leftAward,backgroundColor:aindex==data.indexSelect?data.colorAwardSelect:data.colorAwardDefault}"
							 v-for="(aitem,aindex) in new_awardList" :key="aindex">
								<image class="pond-name-img" mode="aspectFit" :src="aitem.image_url"></image>
								<view class="pond-name fs-sm">{{aitem.name}}</view>
							</view>
							<view @click="startGame" class="start-btn">
								<image src="../../static/pond/pond-button.png" style="height:160upx;width:100%;"></image>
								<view v-if="data.register>0">
									<view :animation="data.animationData" style="display:inline;position:absolute;left:10upx;height:136upx;width:178upx;">
										<image src="../../static/pond/pond-register.png" style="height:136upx;width:178upx;"></image>
									</view>
									<view class="flex-x-center">
										<view :animation="data.animationData" class="pond-register fs-sm">-{{data.register}}积分</view>
									</view>
								</view>
								<image :animation="data.animationData" src="../../static/pond/pond-cj.png" style="position:absolute;left:10upx;height:136upx;width:178upx;"
								 v-else></image>
							</view>
						</view>
					</view>
					<navigator hoverClass="navigator-hover" openType="redirect" style="display:inline;padding-right:150upx" url="/pages/index/index">
						<image src="../../static/pond/home.png" style="height:30upx;width:30upx;margin-right:14upx;margin-bottom:-1upx"></image>
						<view class="pond-bottom">回到首页</view>
					</navigator>
					<navigator hoverClass="navigator-hover" style="display:inline" url="/pond/prize/prize">
						<view class="pond-bottom">中奖记录</view>
						<image class="pond-jt" src="../../static/pond/pond-jt.png"></image>
					</navigator>
				</view>
				<view v-if="data.prize==2">
					<view class="act-modal">
						<view @click="closeActModal" class="act-modal-bg"></view>
						<view class="act-modal-pic flex-y-center flex-x-center">
							<view style="text-align:center;position:relative">
								<image :src="data.__wxapp_img.pond.pond.pond_success.url" style="height:462upx;width:750upx"></image>
								<image @click="pondClose" class="pond-model-image" src="../../static/pond/pond-close.png"></image>
								<view class="act-modal-close flex-x-center" style="">
									<view class="pond-xxcy fs-b" style="margin-top:-14upx;padding-bottom:12upx">恭喜</view>
								</view>
								<view class="act-modal-close flex-x-center">
									<view class="pond-ok fs-b">抽中{{data.name}}</view>
								</view>
								<view class="act-modal-close flex-x-center">
									<view style="width:591upx;background:#ffffff;border-radius:0 0 24upx 24upx">
										<view @click="pondClose" class="pond-bottom pond-bottom-2">继续抽奖</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view v-if="data.prize==1">
					<view class="act-modal">
						<view @click="closeActModal" class="act-modal-bg"></view>
						<view class="act-modal-pic flex-y-center flex-x-center">
							<view style="text-align:center;position:relative">
								<image :src="data.__wxapp_img.pond.pond.pond_empty.url" style="height:240upx;width:750upx"></image>
								<image @click="pondClose" class="pond-model-image" src="../../static/pond/pond-close.png"></image>
								<view class="act-modal-close flex-x-center" style="">
									<view class="pond-xxcy fs-b" style="margin-top:-14upx;padding-bottom:12upx">谢谢参与</view>
								</view>
								<view class="act-modal-close flex-x-center">
									<view class="pond-xxcy fs-b" style="margin-top:-10upx">再换个姿势抽奖</view>
								</view>
								<view class="act-modal-close flex-x-center">
									<view style="width:591upx;background:#ffffff;border-radius:0 0 24upx 24upx">
										<view @click="pondClose" class="pond-bottom pond-bottom-2">继续抽奖</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<save-qrcode v-bind="{data:data}" @qrcodeClick="qrcodeClick" @saveQrcode="saveQrcode" @qrcodeClose="qrcodeClose" @getGoodsQrcode="getGoodsQrcode" @shareModalClose="shareModalClose" @onShareWebMessage="onShareWebMessage"></save-qrcode>
			<comp-footer v-bind="{data:data}"></comp-footer>

		</view>

	</view>
</template>

<script>var myVue = {};
	import saveQrcode from '../../components/save_qrcode/save_qrcode.vue'
	var p_animation, bout, animation;
	export default {
		computed:{
			new_circleList(){
				var arr = this.data.circleList
				arr.forEach(function(e){
					e.new_topCircle = uni.upx2px(e.topCircle) + 'px';
					e.new_leftCircle = uni.upx2px(e.leftCircle) + 'px';
				})
				return arr;
			},
			new_awardList(){
				var arr = this.data.awardList
				arr.forEach(function(e){
					e.new_topAward = uni.upx2px(e.topAward) + 'px';
					e.new_leftAward = uni.upx2px(e.leftAward) + 'px';
				})
				return arr;
			},
			upx_115(){
				return uni.upx2px(115)+'px';
			}
		},
		components: {
			saveQrcode
		},
		data() {
			return {
				data: {
					circleList: [],
					awardList: [],
					colorCircleFirst: "#F12416",
					colorCircleSecond: "#FFFFFF",
					colorAwardDefault: "#F5F0FC",
					colorAwardSelect: "#ffe400",
					indexSelect: 0,
					isRunning: !1,
					prize: !1,
					close: !1,
					lottert: 0,
					animationData: "",
					time: !1,
					title: ""
				},
			};
		},
		onLoad: function(t) {myVue = this;
			myVue.getApp.page.onLoad(this, t);
			var a = this;
			a.getApp.request({
				url: a.getApp.api.pond.setting,
				success: function(t) {
					if (0 == t.code) {
						var e = t.data.title;
						e && (a.getApp.core.setNavigationBarTitle({
							title: e
						}), a.setData({
							title: e
						}));
					}
				}
			});
		},
		onShow: function() {
			myVue.getApp.page.onShow(this);
			var n = this;
			n.getApp.core.showLoading({
					title: "加载中"
				}),
				n.getApp.request({
					url: n.getApp.api.pond.index,
					success: function(t) {
						n.setData(t.data);
						for (var e = t.data.list, a = 18, o = 18, i = 0; i < 8; i++) 
						0 == i ? o = a = 18 : i < 3 ? (a = a,o = o + 196 + 8) : i < 5 ? (o = o, a = a + 158 + 8) : i < 7 ? (o = o - 196 - 8,
							a = a) : i < 8 && (o = o, a = a - 158 - 8), e[i].topAward = a, e[i].leftAward = o;
						n.setData({
							awardList: e
						});
					},
					complete: function(t) {
						n.getApp.core.hideLoading();
						for (var e = 4, a = 4, o = [], i = 0; i < 24; i++) {
							if (0 == i) e = a = 8;
							else if (i < 6) a = 4, e += 110;
							else if (6 == i) a = 8,
								e = 660;
							else if (i < 12) a += 92, e = 663;
							else if (12 == i) a = 545, e = 660;
							else if (i < 18) a = 550,
								e -= 110;
							else if (18 == i) a = 545, e = 10;
							else {
								if (!(i < 24)) return;
								a -= 92, e = 5;
							}
							o.push({
								topCircle: a,
								leftCircle: e
							});
						}
						n.setData({
							circleList: o
						}), bout = setInterval(function() {
							"#FFFFFF" == n.data.colorCircleFirst ? n.setData({
								colorCircleFirst: "#F12416",
								colorCircleSecond: "#FFFFFF"
							}) : n.setData({
								colorCircleFirst: "#FFFFFF",
								colorCircleSecond: "#F12416"
							});
						}, 900), n.pond_animation();
					}
				});
		},

		methods: {
			startGame: function() {
				var n = this;
				if (!n.data.isRunning) {
					var t = "";
					if (0 == n.data.oppty && (t = "抽奖机会不足"), n.data.integral || (t = "积分不足"), n.data.time || (t = "活动未开始或已经结束"),
						t) n.getApp.core.showModal({
						title: "很抱歉",
						content: t,
						showCancel: !1,
						success: function(t) {
							t.confirm && n.setData({
								isRunning: !1
							});
						}
					});
					else {
						clearInterval(p_animation),
						//#ifndef H5
						 animation.translate(0, 0).step(), 
						//#endif
						 n.setData({
							 //#ifndef H5
							animationData: animation.export(),
							//#endif
							isRunning: !0,
							lottert: 0
						});
						var e = n.data.indexSelect,
							a = 0,
							s = n.data.awardList,
							r = setInterval(function() {
								if (e++, e %= 8, a += 30, n.setData({
										indexSelect: e
									}), 0 < n.data.lottert && e + 1 == n.data.lottert) {
									if (clearInterval(r), n.pond_animation(), 5 == s[e].type) var t = 1;
									else t = 2;
									n.setData({
										isRunning: !1,
										name: s[e].name,
										num: s[e].id,
										prize: t
									});
								}
							}, 200 + a);
						n.getApp.request({
							url: n.getApp.api.pond.lottery,
							success: function(o) {
								if (1 == o.code) return clearInterval(r), n.getApp.core.showModal({
									title: "很抱歉",
									content: o.msg ? o.msg : "网络错误",
									showCancel: !1,
									success: function(t) {
										t.confirm && _this.setData({
											isRunning: !1
										});
									}
								}), void n.pond_animation();
								"积分不足" == o.msg && n.setData({
									integral: !1
								});
								var i = o.data.id;
								s.forEach(function(t, e, a) {
									t.id == i && setTimeout(function() {
										n.setData({
											lottert: e + 1,
											oppty: o.data.oppty
										});
									}, 2e3);
								});
							}
						});
					}
				}
			},
			pondClose: function() {
				this.setData({
					prize: !1
				});
			},
			pond_animation: function() {
				//#ifndef H5
				var t = this;
				animation = t.getApp.core.createAnimation({
					duration: 500,
					timingFunction: "step-start",
					delay: 0,
					transformOrigin: "50% 50%"
				});
				var e = !0;
				p_animation = setInterval(function() {
					e ? (animation.translate(0, 0).step(), e = !1) : (animation.translate(0, -3).step(),
						e = !0), t.setData({
						animationData: animation.export()
					});
				}, 900);
				//#endif
			},
			showShareModal: function() {
				this.setData({
					share_modal_active: "active"
				});
			},
			shareModalClose: function() {
				this.setData({
					share_modal_active: ""
				});
			},

			getGoodsQrcode: function() {
				var e = this;
				if (e.setData({
						qrcode_active: "active",
						share_modal_active: ""
					}), e.data.goods_qrcode) return !0;
				e.getApp.request({
					url: e.getApp.api.pond.qrcode,
					success: function(t) {
						0 == t.code && e.setData({
							goods_qrcode: t.data.pic_url
						}), 1 == t.code && (e.goodsQrcodeClose(), e.getApp.core.showModal({
							title: "提示",
							content: t.msg,
							showCancel: !1,
							success: function(t) {
								t.confirm;
							}
						}));
					}
				});
			},
			qrcodeClick: function(t) {
				var that = this;
				var e = t.currentTarget.dataset.src;
				that.getApp.core.previewImage({
					urls: [e]
				});
			},
			qrcodeClose: function() {
				this.setData({
					qrcode_active: ""
				});
			},
			saveQrcode: function() {
				var e = this;
				e.getApp.core.saveImageToPhotosAlbum ? (e.getApp.core.showLoading({
					title: "正在保存图片",
					mask: !1
				}), e.getApp.core.downloadFile({
					url: e.data.goods_qrcode,
					success: function(t) {
						e.getApp.core.showLoading({
							title: "正在保存图片",
							mask: !1
						}), e.getApp.core.saveImageToPhotosAlbum({
							filePath: t.tempFilePath,
							success: function() {
								e.getApp.core.showModal({
									title: "提示",
									content: "商品海报保存成功",
									showCancel: !1
								});
							},
							fail: function(t) {
								e.getApp.core.showModal({
									title: "图片保存失败",
									content: t.errMsg,
									showCancel: !1
								});
							},
							complete: function(t) {
								e.getApp.core.hideLoading();
							}
						});
					},
					fail: function(t) {
						e.getApp.core.showModal({
							title: "图片下载失败",
							content: t.errMsg + ";" + e.data.goods_qrcode,
							showCancel: !1
						});
					},
					complete: function(t) {
						e.getApp.core.hideLoading();
					}
				})) : e.getApp.core.showModal({
					title: "提示",
					content: "当前版本过低，无法使用该功能，请升级到最新版本后重试。",
					showCancel: !1
				});
			},

			goodsQrcodeClose: function() {
				this.setData({
					goods_qrcode_active: "",
					no_scroll: !1
				});
			},
		onShareWebMessage: function() {
			var that = this;
			myVue.getApp.page.onShareAppMessage(this), this.setData({
				share_modal_active: !1
			});
			
			setTimeout(function() {
				this.$webShare({
					path: "/pond/pond/pond?user_id=" + that.getApp.getUser().id,
					title: this.data.title ? this.data.title : "九宫格抽奖"
				}).then(function() {
					
				})
			}, 500);
		},
		},

		onHide: function() {
			myVue.getApp.page.onHide(this), clearInterval(bout), clearInterval(p_animation);
		},
		onShareAppMessage: function() {
			var that = this;
			myVue.getApp.page.onShareAppMessage(this), this.setData({
				share_modal_active: !1
			});
			var t = {
				path: "/pond/pond/pond?user_id=" + that.getApp.getUser().id,
				title: this.data.title ? this.data.title : "九宫格抽奖"
			};
			setTimeout(function() {
				return t;
			}, 500);
		},


	}
</script>

<style scoped>
	.page /deep/ .goods-qrcode-modal {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 1000;
		background: rgba(0, 0, 0, .5);
		padding: 40upx;
		transform: translateY(100%);
		opacity: .5;
		transition: opacity 250ms;
		visibility: hidden;
	}

	.page /deep/ .goods-qrcode-modal.active {
		transform: translateY(0);
		opacity: 1;
		visibility: visible;
	}

	.page /deep/ .goods-qrcode-body {
		background: #fff;
		height: 100%;
		border-radius: 10upx;
		z-index: 99999;
	}

	.page /deep/ .goods-qrcode-modal .goods-qrcode-box {
		height: 100%;
		position: relative;
		box-shadow: 0 0 15upx rgba(0, 0, 0, .15);
	}

	.page /deep/ .goods-qrcode-modal .goods-qrcode-loading {
		top: 0;
		left: 0;
		position: absolute;
		width: 100%;
		height: 100%;
	}

	.page /deep/ .goods-qrcode-modal .goods-qrcode {
		top: 0;
		left: 0;
		position: absolute;
		width: 100%;
		height: 100%;
		background: #fff;
		display: none;
	}

	.page /deep/ .goods-qrcode-modal .goods-qrcode.active {
		display: block;
	}

	.page /deep/ .goods-qrcode-modal .goods-qrcode-close {
		position: absolute;
		top: 40upx;
		right: 40upx;
		padding: 15upx;
	}

	.page /deep/ .share-modal {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, .0);
		z-index: 1000;
		transform: translateY(100%);
		transition: background 250ms;
	}

	.page /deep/ .share-modal .share-modal-body {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background: #f2f2f2;
		padding-top: 60upx;
		transform: translateY(100%);
		transition: transform 250ms;
	}

	.page /deep/ .share-modal.active {
		transform: translateY(0);
		background: rgba(0, 0, 0, .5);
	}

	.page /deep/ .share-modal.active .share-modal-body {
		transform: translateY(0);
	}

	.page /deep/ .share-modal .share-bottom {
		text-align: center;
		font-size: 9pt;
		margin: 0;
		padding: 0;
		margin-bottom: 60upx;
		line-height: inherit;
		border: none;
		background: none;
		color: inherit;
		font-family: inherit;
		display: inline-block;
	}

	.page /deep/ .share-modal .share-bottom:after {
		display: none;
	}

	.page /deep/ .share-modal .share-bottom cover-image,
	.page /deep/ .share-modal .share-bottom image {
		width: 120upx;
		height: 120upx;
		margin-bottom: 12upx;
		border-radius: 999upx;
		border: 1upx solid #eee;
	}

	.page /deep/ .share-modal .share-bottom:active cover-image,
	.page /deep/ .share-modal .share-bottom:active image {
		opacity: .7;
	}

	.page /deep/ .share-modal .share-modal-close {
		background: #fff;
		height: 100upx;
		border-top: 1upx solid #eee;
	}


	.pond-head {
		margin-bottom: -40upx;
	}

	.pond-head image {
		width: 100%;
		height: 430upx;
	}

	.pond-gze {
		background: #000000;
		color: #ffffff;
		text-align: center;
		background-color: rgba(0, 0, 0, 0.4);
		line-height: 48upx;
		width: 92upx;
		border-radius: 24upx 0 0 24upx;
		position: absolute;
		right: 0;
		top: 40upx;
	}

	.pond-bottom {
		display: inline-block;
		color: #ffffff;
		border-radius: 40upx;
	}

	.bg {
		text-align: center;
		margin-bottom: 20upx;
	}

	.pond-cj {
		display: inline-block;
		background: #c62015;
		border-radius: 28upx;
		line-height: 56upx;
		padding: 0 30upx;
	}

	.pond-text {
		color: #ffffff;
		position: relative;
	}

	.pond-num {
		color: #ffb92a;
	}

	.pond-frame {
		display: inline-block;
		position: relative;
		margin-top: 16upx;
		width: 680upx;
		height: 536upx;
	}

	.pond-frame-t {
		position: absolute;
		left: 38upx;
		top: 38upx;
		bottom: 38upx;
		right: 38upx;
	}

	.pond-frame-bg {
		width: 680upx;
		height: 536upx;
	}

	.pond-goods {
		display: inline-block;
		position: relative;
		height: 148upx;
		width: 196upx;
	}

	.pond-good-img {
		height: 148upx;
		width: 196upx;
		padding: 0 4upx;
	}

	.pond-name-img {
		position: absolute;
		top: 12upx;
		left: 0;
		width: 100%;
		height: 11vw;
		z-index: 1;
	}

	.pond-name {
		position: absolute;
		top: 75%;
		color: #c62015;
		width: 196upx;
		overflow: hidden;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
	}

	.pond-register {
		padding: 2upx 16upx;
		border-radius: 16upx;
		line-height: 32upx;
		position: absolute;
		top: 84upx;
		background: #fff4ba;
	}

	.container-out {
		height: 566upx;
		width: 680upx;
		background-color: #F47915;
		margin: 32upx auto 30upx auto;
		border-radius: 16upx;
		position: relative;
	}

	.container-in {
		width: 640upx;
		height: 526upx;
		background-color: #f12416;
		border-radius: 20upx;
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		margin: auto;
	}

	.circle {
		position: absolute;
		display: block;
		border-radius: 50%;
		height: 15upx;
		width: 15upx;
	}

	.content-out {
		position: absolute;
		height: 144upx;
		width: 196upx;
		background-color: #f5f0fc;
		border-radius: 16upx;
		box-shadow: 0 16upx 0 #FFCEC0;
	}

	.start-btn {
		position: absolute;
		margin: auto;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		border-radius: 16upx;
		height: 159upx;
		width: 196upx;
		bbackground-color: #ffe400;
		color: #f6251e;
		text-align: center;
		font-weight: bolder;
		line-height: 154upx;
	}

	.page /deep/ .award-image {
		position: absolute;
		margin: auto;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		height: 140upx;
		width: 130upx;
	}

	.page /deep/ .act-modal {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 2001;
		vvisibility: hidden;
		oopacity: 0;
		transition: 200ms;
	}

	.page /deep/ .act-modal.show {
		visibility: visible;
		opacity: 1;
	}

	.page /deep/ .act-modal .act-modal-bg {
		background: rgba(0, 0, 0, 0.5);
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 1;
	}

	.page /deep/ .act-modal .act-modal-pic {
		background: rgba(0, 0, 0, 0.25);
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 1;
	}

	.page /deep/ .act-modal .act-modal-close image {
		width: 50upx;
		height: 50upx;
		margin-top: 50upx;
	}

	.page /deep/ .pond-jt {
		height: 18upx;
		width: 18upx;
		margin-left: 12upx;
		margin-bottom: 3upx;
	}

	.page /deep/ .pond-ok {
		width: 591upx;
		background: #ffffff;
		color: #353535;
		margin-top: -10upx;
		padding: 0 60upx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.page /deep/ .pond-xxcy {
		width: 591upx;
		background: #ffffff;
		color: #353535;
	}

	.page /deep/ .pond-bottom-2 {
		width: 480upx;
		margin: 64upx 0;
		background: #ff5c5c;
		line-height: 80upx;
	}

	.page /deep/ .pond-model-image {
		position: absolute;
		right: 80upx;
		top: 0;
		z-index: 555;
		width: 50upx;
		height: 50upx;
	}

	.page /deep/ .goods-qrcode-modal {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 1000;
		background: rgba(0, 0, 0, .5);
		padding: 40upx;
		transform: translateY(100%);
		opacity: .5;
		transition: opacity 250ms;
		visibility: hidden;
	}

	.page /deep/ .goods-qrcode-modal.active {
		transform: translateY(0);
		opacity: 1;
		visibility: visible;
	}

	.page /deep/ .goods-qrcode-body {
		background: #fff;
		height: 100%;
		border-radius: 10upx;
		z-index: 99999;
	}

	.page /deep/ .goods-qrcode-modal .goods-qrcode-box {
		height: 100%;
		position: relative;
		box-shadow: 0 0 15upx rgba(0, 0, 0, .15);
	}

	.page /deep/ .goods-qrcode-modal .goods-qrcode-loading {
		top: 0;
		left: 0;
		position: absolute;
		width: 100%;
		height: 100%;
	}

	.page /deep/ .goods-qrcode-modal .goods-qrcode {
		top: 0;
		left: 0;
		position: absolute;
		width: 100%;
		height: 100%;
		background: #fff;
		display: none;
	}

	.page /deep/ .goods-qrcode-modal .goods-qrcode.active {
		display: block;
	}

	.page /deep/ .goods-qrcode-modal .goods-qrcode-close {
		position: absolute;
		top: 40upx;
		right: 40upx;
		padding: 15upx;
	}

	.page /deep/ .share-modal {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, .0);
		z-index: 1000;
		transform: translateY(100%);
		transition: background 250ms;
	}

	.page /deep/ .share-modal .share-modal-body {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background: #f2f2f2;
		padding-top: 60upx;
		transform: translateY(100%);
		transition: transform 250ms;
	}

	.page /deep/ .share-modal.active {
		transform: translateY(0);
		background: rgba(0, 0, 0, .5);
	}

	.page /deep/ .share-modal.active .share-modal-body {
		transform: translateY(0);
	}

	.page /deep/ .share-modal .share-bottom {
		text-align: center;
		font-size: 9pt;
		margin: 0;
		padding: 0;
		margin-bottom: 60upx;
		line-height: inherit;
		border: none;
		background: none;
		color: inherit;
		font-family: inherit;
		display: inline-block;
	}

	.page /deep/ .share-modal .share-bottom:after {
		display: none;
	}

	.page /deep/ .share-modal .share-bottom cover-image,
	.page /deep/ .share-modal .share-bottom image {
		width: 120upx;
		height: 120upx;
		margin-bottom: 12upx;
		border-radius: 999upx;
		border: 1upx solid #eee;
	}

	.page /deep/ .share-modal .share-bottom:active cover-image,
	.page /deep/ .share-modal .share-bottom:active image {
		opacity: .7;
	}

	.page /deep/ .share-modal .share-modal-close {
		background: #fff;
		height: 100upx;
		border-top: 1upx solid #eee;
	}
</style>
<style>
	page {
		background: #f12416;
	}
</style>